<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 500px;
				height: 500px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">
			<canvas id="canvasone" width="500" height="500"></canvas>
			<input type="button"  id="rightBtn" value="向右" />
			<input type="button"  id="downBtn" value="向下" />
			<input type="button"  id="upBtn" value="向上" />
			<input type="button"  id="leftBtn" value="向左" />
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let ppen=oneCanvas.getContext('2d');

//			function move(x,y){
//				ppen.clearRect(10,10,200,200);
//				ppen.translate(x,y);
//				ppen.fillRect(10,10,100,100);
//			}
						
			var canvasWidth=canvasone.width;
			var canvasHeight=canvasone.height;
			
			var x=0;
			var ix=canvasWidth-100;
			var h=0;
			var ih=canvasHeight-100;
			
		    var speed=20;
		    var k=speed;		
			function move(a,b){					
				ppen.clearRect(1,1,100,100);
				ppen.translate(a,b);
				ppen.fillRect(1,1,100,100);
					
			}
				
			function jiance(j){
				if(k>j){
					k=j;
				}
			}			
			dsq= setInterval(function(){		 			 	
				if(canvasWidth-100-x>0){
					jiance(canvasWidth-100-x);
					move(k,0);
					x=x+k;
				}				
				else{		
					k=speed;
					setTimeout(function(){
						if(canvasHeight-100-h>0){
							jiance(canvasHeight-100-h);
							move(0,k);
							h=h+k;	
						}						
						else{
							k=speed;
							if(ix>0){
								jiance(ix);
								move(-k,0);
								ix=ix-k;
							}
							else{
								k=speed;
								if(ih>0){
									jiance(ih);
									move(0,-k);
									ih=ih-k;	
								}
								else{
									x=0;
									ix=canvasWidth-100;
									h=0;
									ih=canvasHeight-100;
								}								
							}
						}
				},0)					
				}
			},100)			
		 }	
	</script>
</html>
